<html>
<head>
    <title>区域管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">区域管理</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4" style="border: 1px solid #1ab394; " >
                <div style="background:linear-gradient(45deg, #0081ff, #1cbbb4);padding: 15px 10px;color: #ffffff;" >区域列表</div>
                <el-input
                        placeholder="输入关键字进行筛选"
                        v-model="filterText" style="border-radius: 0px">
                </el-input>
                <el-tree
                        v-if="devTree"
                        :data="devTree"
                        node-key="Id"
                        @node-click = "onTreeNode"
                        default-expand-all
                        :filter-node-method="filterNode"
                        ref="tree"
                        :props="defaultProps" style="overflow-y: scroll;overflow-x:scroll;height: calc(100% - 80px);width: 100%">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
                <i :class="data.icon"></i>{{data.Text}}
            </span>
        </span>
                </el-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form  label-width="80px" :model="zoneForm" ref="zoneForm" :disabled="editMod">
                        <el-form-item label="区域名称">
                            <el-input v-model="zoneForm.zone_name" style="width: 15%;"></el-input>
                        </el-form-item>

                        <el-form-item label="类型">
                            <el-checkbox-group v-model="checkedTypes" size="medium">
                                <el-checkbox-button v-for="item in types" :label="item.str" :key="item.str">{{item.name}}</el-checkbox-button>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item>
                            <el-row>
                              <el-button type="primary" @click="saveBtn()" >保存</el-button>

                                <el-button @click="delBtn()">删除</el-button>
                            </el-row>
                        </el-form-item>
                    </el-form>
                    <el-row style="margin:0px 30px 20px 80px">
                    <el-button @click="addZone()">新增区域</el-button>
                    </el-row>
                    <el-dialog
                            title="增加区域"
                            :visible.sync="addFormVisible"
                            width="45%"
                           >
                        <el-card>
                            <el-form  label-width="80px" :model="newZoneForm" ref="newZoneForm">
                                <el-form-item label="区域名称">
                                    <el-input v-model="newZoneForm.zone_name" style="width: 15%;"></el-input>
                                </el-form-item>
                                <el-form-item label="类型">
                                    <el-checkbox-group v-model="checkedTypes2" size="medium">
                                            <el-checkbox-button v-for="item in types" :label="item.str" :key="item.str">{{item.name}}</el-checkbox-button>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-form>
                        </el-card>
                        <br/>

                        <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="cancleChild()">取消</el-button>
                    <el-button type="primary" @click="submitChild()"
                               style="text-align: center">确定</el-button>
            </span>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
    </div>


</div>



<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
            zoneForm:{
                electric:0,
                water:0,
                gas:0,
                coal:0,
                heat:0,
                oil:0,
                steam:0,
                air:0
            },
            filterText:'',
            defaultProps:{
                label:'Text',
                id:'Id',
            },
            newZoneForm:{
            },
            expandId:'',
            zoneList:'',
            types:[{name:'电',str:'electric'},{name:'水',str:'water'},{name:'气',str:'gas'},
                {name:'煤',str:'coal'},{name:'热',str:'heat'},{name:'油',str:'oil'},{name:'蒸汽',str:'steam'},{name:'空气',str:'air'}],
            checkedTypes:[],
            checkedTypes2:[],
            addFormVisible:false,
            editMod:true,
            currentId:'',
            currentProNo:'',
            number:2,
            devTree:''
        },
        methods:{

            onTreeNode:function(data){
                this.currentId = data.Id;
                var ids =this.currentId.split('_');
                if(ids[0]=="P"){
                    HttpUtil.get('Project/List',{id:ids[1]}).success((res)=>{
                        this.currentProNo = res.data[0].projectNo;
                    })
                }
                if (ids[0] =="Z"){
                    this.editMod = false;
                    HttpUtil.get('Zone/List',{zoneId:ids[1]}).success((res)=>{
                    this.zoneForm = res.data[0];
                    var checkedData = [];
                        for (var item of this.types){
                            if (res.data[0][item.str] == 1){
                                checkedData.push(item.str);
                            }
                        }
                        this.checkedTypes = checkedData;
                    });
                } else {
                    this.zoneForm ={};
                    this.checkedType = [];
                    this.editMod = true;
                }
            },
            addZone:function(){
                var ids =this.currentId.split('_');
                if (ids[0]=='Z'||ids[0]=="P") {
                    this.addFormVisible = true;
                }else {
                    this.$message({
                        type: 'warning',
                        message: '请选择公司或者区域'
                    });
                }

            },
            saveBtn:function () {
             for (var item of this.types){
                 this.zoneForm[item.str] = 0;
             };
             for (var item of this.checkedTypes){
                 this.zoneForm[item] = 1;
             };
             console.log(this.zoneForm);
                HttpUtil.get('Zone/Update',this.zoneForm).success((res)=>{
                 this.$message({
                     type: 'success',
                     message: '修改成功'
                 });
                  location.reload();
             })
            },
            delBtn:function () {
                var ids =this.currentId.split('_');
                HttpUtil.get('Zone/Delete',{zone_id: ids[1]}).success((res)=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    location.reload();
                })
            },
            cancleChild:function () {
                this.newZoneForm={};
                this.checkedTypes2=[];
                this.addFormVisible = false;
            },
            submitChild:function () {
                for (var item of this.types){
                    this.newZoneForm[item.str] = 0;
                };
                for (var item of this.checkedTypes2){
                    this.newZoneForm[item] = 1;
                };
                this.newZoneForm.projectNo = this.currentProNo;
                var ids =this.currentId.split('_');
                if (ids[0]=="Z") {
                 this.newZoneForm.zone_pid = this.zoneForm.zone_id;
                }
                console.log(this.newZoneForm);
                this.newZoneForm.isBuild = 0;
                HttpUtil.get('Zone/Add',this.newZoneForm).success((res)=>{
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    });
                    location.reload();
                })

            },
            parseTree(data,pid) {
                const result = []
                let temp = []
                for (let i = 0; i < data.length; i++) {
                    if (data[i].ParentId === pid) {
                        const obj =data[i]
                        if (parseInt(obj.Type - 110) == 2 ){
                            obj.icon = 'el-icon-s-home';

                        }else if  (parseInt(obj.Type - 200) == 1 ){
                            obj.icon = 'el-icon-s-menu'
                        }else if (parseInt(obj.Type - 300) == 1 ) {
                            obj.icon = 'el-icon-news'
                        }
                        temp = this.parseTree(data, data[i].Id)
                        if (temp.length > 0) {
                            obj.children = temp
                        }
                        result.push(obj)
                    }
                }
                return result
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.Text.indexOf(value) !== -1;
            },
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created:function(){
            HttpUtil.get('Zone/List',{}).success((res)=>{
                this.zoneList = res.data;
            });
            const loading = this.$loading({
                lock: true,
                text: '加载数据中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            HttpUtil.get('User/getUserTree',{UserId:SiteConfig.account.id,level:2,zoneType:0,energyType:'Total'}).success((res)=>{
                let data = res.data.filter((item)=>{
                    return parseInt(item.Type - 110) == 2 || parseInt(item.Type - 200) == 1 || parseInt(item.Type - 300) == 1
                });
                this.devTree =  this.parseTree(data,'U_0');
                loading.close();
                $('.page-main').show();
            });
        },
        mounted:function(){
        }
    });


</script>

</body>
</html>
